Fix connection delete and change table actions UX #45
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
… types feat(connection-table.tsx): add Skeleton loading component for better user experience feat(connection-table.tsx): add toast notifications for successful and error actions feat(connection-table.tsx): refactor handleSave, handleDelete, handleRefresh functions feat(connection-table.tsx): update setCurrentConnection usage feat(modal.tsx): update import statement for Loader2 component feat(modal.tsx): update button text to show loader while saving feat(row-actions.tsx): create RowActions component for connection actions feat(table-item.tsx): update import statement for Connection type feat(cql-editor.tsx): add loading state for query execution to provide visual feedback to users feat(cql-editor.tsx): implement async execution of queries to handle asynchronous operations feat(cql-editor.tsx): add Skeleton component to display loading state while fetching data feat(layout.tsx): add loadingKeyspaces state to indicate when keyspaces are being fetched feat(layout.tsx): update queryKeyspace and fetchInitialConnections to return promises feat(use-connections.ts): create useConnectionsStore to manage connection-related state and actions feat(internal-db/connections.ts): convert deleteConnectionById to an async function feat(menu-list.ts): use startTransition to fetch initial connections and query keyspace feat(utils.ts): add sleep function to pause execution for a specified time Signed-off-by: matozinho <[email protected]>
Matozinho
added
enhancement
3 tasks
DanielHe4rt
reviewed
Oct 29, 2024
Comment on lines
+26
to
+31
| // db.exec(` | ||
| // INSERT OR IGNORE INTO connections | ||
| // (id, name, status, host, port, username, password, dc, nodes) | ||
| // VALUES | ||
| // (1, 'ScyllaDB Localhost', 'Offline', 'localhost', '9042', null, null, 'local', 1) | ||
| // `); |
There was a problem hiding this comment.
Regarding that: this query only runs in right after the SQLite file is generated. Usually these credentials are default for LocalHost with ScyllaDB Docker Images, that's why I maintained it there.
It was conflicting with something else?
There was a problem hiding this comment.
This was causing the strange behavior on deleting that @Daniel-Boll had mentioned earlier because when you delete this from db, it just adds again when the file is re-executed.
We may keep it and find a way to avoid this specific entry from being deleted.
Daniel-Boll
approved these changes
Oct 29, 2024
gvieira18
approved these changes
Oct 29, 2024
DanielHe4rt
approved these changes
Oct 29, 2024
Matozinho
added
hacktoberfest-accepted
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This pull request closes #44 and includes significant refactoring and improvements to the connections management and query execution functionalities. The most important changes involve migrating state management to a custom hook, enhancing user feedback with loading states, and refactoring the connection table component to improve code readability and maintainability.
Refactoring and State Management:
src/app/(main)/connections/_components/connection-table.tsx: Refactored to useuseConnectionsStorefor state management, removing local state and actions. Added loading states and error handling for connection operations. [1] [2] [3]src/hooks/use-connections.ts: Created a custom hookuseConnectionsStoreto manage connection states and operations, including fetching, deleting, refreshing, saving, and updating connections.User Feedback Enhancements:
src/app/(main)/connections/_components/connection-table.tsx: AddedSkeletoncomponents to display loading states for connections.src/app/(main)/query-runner/_components/cql-editor.tsx: Added loading state for query results and usedSkeletoncomponents to indicate loading. [1] [2]Component and Import Improvements:
src/app/(main)/connections/_components/row-actions.tsx: Created a newRowActionscomponent to handle connection actions (update, refresh, delete) with user feedback.src/actions/query-keyspaces.ts: Updated import to usetypekeyword for type-only imports.Miscellaneous Changes:
src/lib/internal-db/connections.ts: Commented out initial connection insertion and madedeleteConnectionByIdasynchronous. [1] [2]src/app/(main)/connections/_components/modal.tsx: SimplifieduseEffectfor opening the modal and added a loading spinner to the save button. [1] [2]These changes collectively improve the codebase by enhancing user experience, improving state management, and making the components more modular and maintainable.